<template>
  <div id="UserCenter">
    <h3 class="title">个人中心</h3>
    <div class="userMain">
      <!-- 登陆账号修改 -->
      <div class="userInfo">
        <span>登陆账号：</span>
        <span class="info-value">{{ account }}</span>
        <el-button type="primary" size="small" @click="showDialog1 = true">修改</el-button>
      </div>
      <!-- 用户头像修改 -->
      <div class="userInfo">
        <div class="avatar-box">
          <span>我的头像：</span>
          <img class="avatar" :src="imageUrl || '/path/to/default/avatar.png'" alt="暂无图片" />
        </div>
        <el-button type="primary" size="small" @click="showDialog0 = true">修改</el-button>
      </div>
      <!-- 用户昵称修改 -->
      <div class="userInfo">
        <span>我的昵称：</span>
        <span class="info-value">{{ nickname }}</span>
        <el-button type="primary" size="small" @click="showDialog2 = true">修改</el-button>
      </div>
      <!-- 用户性别修改 -->
      <div class="userInfo">
        <span>我的性别：</span>
        <span class="info-value">{{ gender }}</span>
        <el-button type="primary" size="small" @click="showDialog3 = true">修改</el-button>
      </div>
      <!-- 用户生日修改 -->
      <div class="userInfo">
        <span>我的生日：</span>
        <span class="info-value">{{ birthday }}</span>
        <el-button type="primary" size="small" @click="showDialog4 = true">修改</el-button>
      </div>
      <!-- 个性签名修改 -->
      <div class="userInfo">
        <span>个性签名：</span>
        <span class="info-value">{{ signature }}</span>
        <el-button type="primary" size="small" @click="showDialog5 = true">修改</el-button>
      </div>
    </div>

    <!-- 登陆账号修改对话框 -->
    <el-dialog v-model="showDialog1" title="修改登陆账号">
      <el-input v-model="newAccount" placeholder="请输入新的登陆账号"></el-input>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showDialog1 = false">取消</el-button>
          <el-button type="primary" @click="updateAccount">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 修改头像对话框 -->
    <el-dialog v-model="showDialog0" title="修改头像">
      <el-upload
        class="avatar-uploader"
        action="https://jsonplaceholder.typicode.com/posts/"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
      </el-upload>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showDialog0 = false">取消</el-button>
          <el-button type="primary" @click="updateAvatar">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 用户昵称修改对话框 -->
    <el-dialog v-model="showDialog2" title="修改昵称">
      <el-input v-model="newNickname" placeholder="请输入新的昵称"></el-input>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showDialog2 = false">取消</el-button>
          <el-button type="primary" @click="updateNickname">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 用户性别修改对话框 -->
    <el-dialog v-model="showDialog3" title="修改性别">
      <el-radio v-model="newGender" label="男">男</el-radio>
      <el-radio v-model="newGender" label="女">女</el-radio>
      <el-radio v-model="newGender" label="保密">保密</el-radio>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showDialog3 = false">取消</el-button>
          <el-button type="primary" @click="updateGender">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 用户生日修改对话框 -->
    <el-dialog v-model="showDialog4" title="修改生日">
      <el-date-picker v-model="newBirthday" type="date" placeholder="选择日期"></el-date-picker>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showDialog4 = false">取消</el-button>
          <el-button type="primary" @click="updateBirthday">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 个性签名修改对话框 -->
    <el-dialog v-model="showDialog5" title="修改个性签名">
      <el-input v-model="newSignature" placeholder="请输入新的个性签名" type="textarea" :rows="3"></el-input>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showDialog5 = false">取消</el-button>
          <el-button type="primary" @click="updateSignature">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import {ref} from 'vue';
import {ElMessage} from 'element-plus';
import {Plus} from '@element-plus/icons-vue';

const showDialog0 = ref(false);
const showDialog1 = ref(false);
const showDialog2 = ref(false);
const showDialog3 = ref(false);
const showDialog4 = ref(false);
const showDialog5 = ref(false);

const account = ref('15732931529');
const nickname = ref("默认数据");
const gender = ref('男');
const birthday = ref('1999-01-01');
const signature = ref('巧者劳而智者忧，无能者无所求');

const newAccount = ref('');
const newNickname = ref('');
const newGender = ref('');
const newBirthday = ref('');
const newSignature = ref('');
const imageUrl = ref('');

const handleAvatarSuccess = (response, file) => {
  console.log('handleAvatarSuccess', response, file);
  imageUrl.value = URL.createObjectURL(file.raw);
  console.log('imageUrl:', imageUrl.value);
};

const beforeAvatarUpload = (file) => {
  const isJPG = file.type === 'image/jpeg';
  const isLt2M = file.size / 1024 / 1024 < 2;

  if (!isJPG) {
    ElMessage.error('上传头像图片只能是 JPG 格式!');
  }
  if (!isLt2M) {
    ElMessage.error('上传头像图片大小不能超过 2MB!');
  }
  return isJPG && isLt2M;
};

const updateAvatar = () => {
  console.log('updateAvatar', imageUrl.value);
  // 这里可以添加将 imageUrl 发送到服务器的逻辑
  // 假设服务器返回新的头像 URL
  // 更新头像显示
  // 假设头像显示在 .avatar 元素中
  document.querySelector('.avatar').src = imageUrl.value;
  // 关闭对话框
  showDialog0.value = false;
  ElMessage.success('头像更新成功');
};

const updateAccount = () => {
  console.log('updateAccount', newAccount.value);
  // 这里可以添加将新账号发送到服务器的逻辑
  // 假设服务器返回新的账号
  account.value = newAccount.value;
  // 关闭对话框
  showDialog1.value = false;
  ElMessage.success('账号更新成功');
};

const updateNickname = () => {
  console.log('updateNickname', newNickname.value);
  // 这里可以添加将新昵称发送到服务器的逻辑
  // 假设服务器返回新的昵称
  nickname.value = newNickname.value;
  // 关闭对话框
  showDialog2.value = false;
  ElMessage.success('昵称更新成功');
};

const updateGender = () => {
  console.log('updateGender', newGender.value);
  // 这里可以添加将新性别发送到服务器的逻辑
  // 假设服务器返回新的性别
  gender.value = newGender.value;
  // 关闭对话框
  showDialog3.value = false;
  ElMessage.success('性别更新成功');
};

const updateBirthday = () => {
  console.log('updateBirthday', newBirthday.value);
  // 这里可以添加将新生日发送到服务器的逻辑
  // 假设服务器返回新的生日
  birthday.value = newBirthday.value;
  // 关闭对话框
  showDialog4.value = false;
  ElMessage.success('生日更新成功');
};

const updateSignature = () => {
  console.log('updateSignature', newSignature.value);
  // 这里可以添加将新签名发送到服务器的逻辑
  // 假设服务器返回新的签名
  signature.value = newSignature.value;
  // 关闭对话框
  showDialog5.value = false;
  ElMessage.success('签名更新成功');
};
</script>

<style scoped lang="less">
@import "./UserCenter.less";
</style>